<template>
  <div class="network-package base-main">
    <!--tab菜单选项-->
    <ul class="title line-bottom color7A7B82 bgcFFF">
      <li :class="[{'active' : nav === 0}, 'text-c pr']" @click="nav=0">
        网点套餐
        <span class="pa"></span>
      </li>
      <li :class="[{'active' : nav === 1}, 'text-c pr']" @click="nav=1">
        网点设备
        <span class="pa"></span>
      </li>
    </ul>

    <!--内容-->
    <div class="content">
      <!--网点套餐设置-->
      <div v-if="nav === 0" class="network">
        <pull-up-reload
          :on-infinite-load="onInfiniteLoad"
          :parent-pull-up-state="infiniteLoadData.pullUpState"
          style="padding-bottom: 0px;">
          <Package
            :packageData="packageData"
            @send-set="packageSet"
          />
        </pull-up-reload>
      </div>
      <!--网点设备-->
      <div v-if="nav === 1" class="equipment">
        <pull-up-reload
          :on-infinite-load="onInfiniteLoad"
          :parent-pull-up-state="infiniteLoadData.pullUpState"
          style="padding-bottom: 0px;">
          <deviceDetail
            :deviceData="deviceData"
            @send-set="deviceSet"
          />
        </pull-up-reload>
      </div>
    </div>

    <!--添加-->
    <base-bottom-btn
      @hasClick="hasClick"
      customIcon="iconshangpinfenxiangtubiaox"
      :txt="btnTxt"
    />
  </div>
</template>

<script type="text/ecmascript-6">
  import Package from '../../components/Package'
  import deviceDetail from '../../components/DeviceDetail'
  import baseBottomBtn from '../../components/BaseBottomBtn'
  import PullUpReload from '../../components/PullUpReload.vue'
  export default {
    components: {
      Package,
      deviceDetail,
      baseBottomBtn,
      PullUpReload
    },
    data() {
      return {
        nav: 0, // 菜单选项,0--网点套餐，1--网点设备
        packageData: [
          {
            id: 1,
            time: 10,
            name: '套餐一',
            price: '5.20'
          },
          {
            id: 2,
            time: 5,
            name: '套餐2',
            price: '2.50'
          }
        ], // 套餐数据
        deviceData: [
          {
            id: 1,
            name: '一号设备'
          },
          {
            id: 2,
            name: '一号设备'
          }
        ], // 设备数据
        btnTxt: '添加套餐',
        page:0,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    watch: {
      nav(newV, oldV) {
        this.btnTxt = newV == 0 ? '添加套餐' : '添加设备到网点'
      },
    },
    methods: {
      // 套餐
      packageSet(obj){
        switch (obj.type){
          case 1:
            this.packageEdit(obj.item);
            break;
          case 2:
            this.packageDel(obj.item);
            break;
        }
      },
      //编辑
      packageEdit(obj){
        console.log('网点套餐--', obj);
        this.$router.push({
          path: '/index/web/NetworkPackage',
          query: {id:obj.id}
        })
      },
      //删除
      packageDel(obj){
//        this.$toast({
//          message: '删除成功',
//          icon: 'passed'
//        })
        console.log('删除套餐--', obj);
      },
      // 添加套餐
      hasClick() {
        console.log('添加套餐');
        if(this.nav === 0) {
          this.$router.push({
            path: '/index/web/AddPackage'
          })
        } else {
          this.$router.push({
            path: '/index/web/AddDevice'
          })
        }
      },
      // 设备
      deviceSet(obj) {
        switch (obj.type){
          case 1:
            this.deviceEdit(obj.item);
            break;
          case 2:
            this.deviceDel(obj.item);
            break;
        }
      },
      //编辑
      deviceEdit(obj){
        console.log('设备编辑--', obj);
      },
      //移除
      deviceDel(obj){
//        this.$toast({
//          message: '删除成功',
//          icon: 'passed'
//        })
        console.log('移除设备--', obj);
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      }
    },
  }
</script>

<style scoped>
  @import "../../assets/css/base.scss";
  .network-package {background: #F7F8FA;}
  .network-package .title{display: flex;height:40px;line-height: 40px;}
  .network-package .title li{flex: 1;}
  .network-package .title li.active{color: #3D7EFF;}
  .network-package .title li span{content:'';bottom:0;left:50%;transform: translateX(-50%);height:2px;width:20%;}
  .network-package .title li.active span{background: #3D7EFF;}
</style>
